import React from 'react';
import axios from 'axios'
import { Form, Input, Select } from 'antd'
const { Option } = Select;
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

// const tailLayout = {
//   wrapperCol: { offset: 8, span: 16 },
// };

export default class Demo extends React.Component {
  state = {
    allUsers: [],
    stuid: ''
  }

  componentDidMount() {
    const { isEdit } = this.props;
    if (isEdit === 'edit') return;
    this.findAllUsers()
  }

  /** 下拉框选择 结果 */
  handleChange = (value) => {
    console.log(`selected ${value}`);
    const { allUsers } = this.state;
    let arr = allUsers.filter(v => v.username === value)
    this.setState({ stuid: arr[0].stuid })
  }

  findAllUsers = async () => {
    let data = await axios.get('/api/findUsers')
    // console.log("表单获取人员信息", data)
    this.setState({ allUsers: data.data.data })
  }

  /** 完成表单提交 处理学号 stuid 字段拼接 */
  onFinish = values => { // undefined
    // console.log('Success:', values);
    const { stuid } = this.state;
    const { getFormList } = this.props;
    // { stuid: '', suid: '111'}
    // console.log('----:', { ...values, stuid })
    getFormList && getFormList({ ...values, stuid })
    this.setState({ stuid: '' })
  };

  onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
  };

  render() {
    const { formInfo, isEdit } = this.props;
    const { allUsers, stuid } = this.state;
    console.log('formInfo我在baseform', formInfo,)
    return (
      <Form
        ref="form"
        {...layout}
        name="basic"
        initialValues={{ remember: true, ...formInfo }}
        onFinish={this.onFinish}
        onFinishFailed={this.onFinishFailed}
      >
        {/* isEdit */}

        <Form.Item label="姓名" name="username">
          {
            isEdit === 'add' ? <Select placeholder="请选择姓名" style={{ width: 120 }} onChange={this.handleChange}>
              {
                allUsers.map((item) => {
                  return <Option key={item.id} value={item.username}>{item.username}</Option>
                })
              }
            </Select> : <Input disabled />
          }
        </Form.Item>
        {
          isEdit === 'add' ? (
            <Form.Item
              label="学号"
              name="stuid"
            // initialValue={stuid}
            // rules={[{ required: true, message: 'Please input your username!' }]}
            >
              <span>{stuid}</span>
              {/* <Input placeholder="学生学号" disabled /> */}
            </Form.Item>
          ) : null
        }

        <Form.Item
          label="理论成绩"
          name="theory"
        // initialValue={formInfo.password && formInfo.password}
        // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="技能成绩"
          name="skill"
        // initialValue={formInfo.password && formInfo.password}
        // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input />
        </Form.Item>
      </Form>
    );
  }
};
